<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="referrer" content="never">
  <title>使用canvas元素平移和滚动背景图像1</title>

  <style>
  </style>
</head>
<body class="vsc-initialized">
    <!-- ### 第一部分 Start ##################################################################### -->
    <style>
    #frame {
        width: 100%;
        max-width: 450px;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        margin: 0 auto;
        line-height: 220px;
        border: 5px solid #333;
        text-align: center;
    }
    #viewport {
        line-height: 60px;
        padding-bottom: 60px;
        font-weight: bold;
        color: #f00;
        position: absolute;
        top:0;
        left: 25%;
        width: 50%;
        background-color: rgba(255, 0, 0, .25);
        border: 5px solid rgba(255, 0, 0, .75);
        text-align: center;
        box-sizing: border-box;
    }
    #player {
        background-color: #000;
        width: 60px;
        height: 20px;
        position: absolute;
        top: 100px;
        margin-left: -10px;
        left: 50%;
        color: #fff;
        line-height: 1;
    }
    @keyframes scroll {
        0% { left: 0; top: 0; }
        25% { left: 0; top: 0; }
        50% { left: 50%; top: 90px; }
        75% { left: 50%; top: 90px; }
        100% { left: 0; top: 0; }
    }
    #viewport {
        animation: scroll 10s linear infinite;
    }
    </style>

<div style="width: 100%;padding: 10px;border: 1px solid #333;display: inline-flex;">
    <!-- 1. 在背景图像内平移视口模型 -->
    <div style="width: 50%;">
        <h3 >1. 在背景图像内平移视口</h3><br/><br/>
        <div id="frame" >Background Image
            <div id="viewport">viewport
                <div id="player">Player</div>
            </div>
        </div>
    </div>
    <!-- 自动加前缀 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

    <!-- 1. 在背景图像内平移视口 Demo -->
    <div style="width: 50%;">
        <h3 >DEMO: 1. 在背景图像内平移视口</h3>
        <div style="display: table-caption">
            <button id="btnStart" class="btn btn-default">开始/停止 动画</button>
            <canvas id="bg" width="640" height="320"></canvas>
        </div>
    </div>
</div>
<script type="text/javascript">
(function() {
    window.requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || function(callback) { window.setTimeout(callback, 1000 / 60); };
    var canvas = document.getElementById('bg');
    var context = canvas.getContext('2d');
    var looping = false;
    var totalSeconds = 0;
    var img = new Image();
    img.onload = imageLoaded;
    img.src = './img/bg.jpg';
    function imageLoaded() {
        draw(0);
        var btn = document.getElementById('btnStart');
        btn.addEventListener('click', function() {
            startStop();
        });
    }
    var lastFrameTime = 0;
    function startStop() {
        looping = !looping;
        if (looping) {
            lastFrameTime = Date.now();
            requestAnimationFrame(loop);
        }
    }
    function loop() {
        if (!looping) {
            return;
        }
        requestAnimationFrame(loop);
        var now = Date.now();
        var deltaSeconds = (now - lastFrameTime) / 1000;
        lastFrameTime = now;
        draw(deltaSeconds);
    }
    function draw(delta) {
        totalSeconds += delta;
        var x = -1 * (img.width - canvas.width) / 2 * (1 + Math.cos(totalSeconds / Math.PI));
        var y = -1 * (img.height - canvas.height) / 2 * (1 + -Math.sin(totalSeconds / Math.PI));
        context.drawImage(img, x, y);
    }
}());
</script>
<!-- ######################################################################## -->
<!-- ### 第一部分 End ##################################################################### -->
<br/>
<br/>
<!-- ### 第二部分 Start ##################################################################### -->
<!-- ######################################################################## -->
    <style>
    #frame2 {
        width: 100%;
        max-width: 560px;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        margin: 0 auto;
    }
    .bgimg2 {
        line-height: 160px;
        float: left;
        width: 33.3333%;
        text-align: center;
        border: 5px solid #000;
        box-sizing: border-box;
    }
    #viewport2 {
        line-height: 80px;
        padding-bottom: 80px;
        font-weight: bold;
        color: #f00;
        position: absolute;
        top:0;
        left: 25%;
        width: 50%;
        background-color: rgba(255, 0, 0, .25);
        border: 5px solid rgba(255, 0, 0, .75);
        text-align: center;
        box-sizing: border-box;
    }
    #player2 {
        background-color: #000;
        width: 60px;
        height: 20px;
        position: absolute;
        top: 120px;
        margin-left: -10px;
        left: 50%;
        color: #fff;
        line-height: 1;
    }
    @keyframes scroll2
    {
        0% {left: 0;}
        25% {left: 0;}
        50% {left: 50%;}
        75% {left: 50%;}
        100% {left: 0;}
    }
    #viewport2 {
        animation: scroll2 8s linear infinite;
    }
    </style>
<div style="width: 100%;padding: 10px;border: 1px solid rgb(37, 15, 238);display: inline-flex;">
    <div style="width: 50%;">
        <h3 >DEMO: 2. 无限滚动背景图像</h3><br/><br/>
        <div id="frame2">
            <div class="bgimg2">Image 1</div>
            <div class="bgimg2">Image 2</div>
            <div class="bgimg2">Image 3</div>
            <div id="viewport2">viewport
                <div id="player2">Player</div>
            </div>
        </div>
    </div>
    <!-- 自动加前缀 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <!-- 无限滚动背景图像 Demo-->
    <div style="width: 50%;">
        <h3 >DEMO: 2. 无限滚动背景图像</h3>
        <div style="display: table-caption">
            <button id="btnStart2" class="btn2 btn-default2">开始/停止 动画</button>
            <canvas id="bg2" width="640" height="320"></canvas>
        </div>
    </div>

</div>

    
<script>
(function() {
    window.requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || function(callback) { window.setTimeout(callback, 1000 / 60); };
    var canvas = document.getElementById('bg2');
    var context = canvas.getContext('2d');
    var looping = false;
    var totalSeconds = 0;
    var img = new Image();
    img.onload = imageLoaded;
    img.src = './img/bg.jpg';
    function imageLoaded() {
        draw(0);
        var btn = document.getElementById('btnStart2');
        btn.addEventListener('click', function() {
            startStop();
        });
    }
    var lastFrameTime = 0;
    function startStop() {
        looping = !looping;
        if (looping) {
            lastFrameTime = Date.now();
            requestAnimationFrame(loop);
        }
    }
    function loop() {
        if (!looping) {
            return;
        }
        requestAnimationFrame(loop);
        var now = Date.now();
        var deltaSeconds = (now - lastFrameTime) / 1000;
        lastFrameTime = now;
        draw(deltaSeconds);
    }
    function draw(delta) {
        totalSeconds += delta;
        var vx = 100; // the background scrolls with a speed of 100 pixels/sec
        var numImages = Math.ceil(canvas.width / img.width) + 1;
        var xpos = totalSeconds * vx % img.width;
        context.save();
        context.translate(-xpos, 0);
        for (var i = 0; i < numImages; i++) {
            context.drawImage(img, i * img.width, 0);
        }
        context.restore();
    }
}());
</script>
<!-- ######################################################################## -->
<!-- ### 第二部分 End ##################################################################### -->



</body>

</html>